<template>
    <div>
      <vab-card shadow="always">
        <template #default>
          <div class="flex_sb">
            <div class="flex leve_title">
              折扣赠品策略-
              <span class="remark_text">详情</span>
            </div>
            <div class="flex_just_end">
              <el-button size="small" @click="handleClick('back')">
                返回
              </el-button>
            </div>
          </div>
        </template>
      </vab-card>
      <!-- 基础信息 -->
      <VabCard>
        <template #header>
          <span class="leve2_title">基础信息</span>
        </template>
        <template #default >
          <el-row :gutter="24" v-loading="loading">
            <el-col
              v-for="(item, i) in DetailBase"
              :key="i"
              :xs="24"
              :sm="12"
              :md="12"
              :lg="8"
              :xl="8"
            >
              <div class="detail-mode" v-if="baseData">
                <span class="label">{{ item.label }}</span>
                <span class="text height" :title="baseData[item.prop] || '--'">
                  {{ baseData[item.prop] || '--' }}
                </span>
              </div>
            </el-col>
          </el-row>
        </template>
      </VabCard>
      <!-- 规则详情 -->
      <ProductMoneyDetail ref="productMoneyDetailRef"/>
      <!-- 适用范围 -->
      <VabCard>
        <template #header>
          <div class="flex">
            <span class="leve2_title">适用范围</span>
          </div>
        </template>
        <template #default>
          <el-table
            border
            height="200"
            style="width: 100%"
            :data="customerList"
            v-loading="loading"
          >
            <el-table-column label="序号" align="center" width="60">
              <template #default="scope">
                <span
                  class="ellipsis"
                  v-text="scope.$index + 1"
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, i) in scopeCloums"
              :key="i"
              min-width="100"
              :prop="item.prop"
              :label="item.label"
              :align="'center'"
            >
              <template #header>
                <span class="text_center">{{ item.label }}</span>
              </template>
              <template #default="{ row }">
                <div class="ellipsis">
                  {{ row[item.prop] }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <VabTotal :total="customerList.length"/>
        </template>
      </VabCard>
    </div>
  </template>
  
<script setup lang="ts">
defineOptions({
  name: 'GiveawayDetail',
})
import ProductMoneyDetail from './component/ProductMoneyDetail.vue'
/**
 * @import
 */
import { DetailBase } from './component/tools'
import { FieldFormat } from '~/src/utils/utils'
import { orderDiscountInfo } from '~/src/api/dms/order';

/**
 * @var
 */
const router = useRouter()
const route = useRoute()


const isClosePrice = ref(true)
const productMoneyDetailRef = ref()

let baseData = reactive<any>(null)
let customerList = ref<any>([])
let loading = ref(false)

// 使用范围
const scopeCloums = [
  { label: '客户编码', prop: 'customer_name' },
  { label: '客户名称', prop: 'customer_number' },
  { label: '是否默认', prop: 'is_default_str' },
]
/**
 * @method
 */

// 字段级格式化
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type, 2)
}

const handleClick = async (value: any) => {
  if (value == 'back') {
    router.go(-1)
    return
  }
}
// 是否显示价格
const handleShowPrice = async () => {
  isClosePrice.value = await !isClosePrice.value
}

const _CrediCustomerInfo = async () => {
  loading.value = true

  const { id } = route.query

  try {

    const res = await orderDiscountInfo({ uid: id })

    const { info, customer_list, item_list } = res.data

    const { name, number, level, is_enable, type, effective_end, effective_start, uid } = info


    baseData = {
      name,
      level_str: `${level}级`,
      is_enable_str: is_enable ? '是' : '否',
      type_str: '指定产品满数量赠',
      effective_date: `${effective_start} / ${effective_end}`,
    }

    customerList = await customer_list.map((item: any) => {
      return {
        ...item,
        is_default_str: item.is_default ? '是' : '否',
      }
    })

    await productMoneyDetailRef.value.getUpdateData(res.data)

    loading.value = false

  } catch (error) { }
}
onActivated(() => {
  _CrediCustomerInfo()
})
</script>
  
<style scoped lang="scss">
.height {
  display: inline-block;
  max-height: 48px;
  overflow-y: auto;
}

.remark {
  display: flex;

  .label {
    display: inline-block;
    width: 122px;
    text-align: right;
    font-size: 14px;
    color: #606266;
    margin-right: 10px
  }

  .text {
    flex: 1;
    border: 1px solid #C0C0C0;
    color: #a9a9a9;
    border-radius: 4px;
    padding: 0px 10px;
    height: 40px;
    overflow-y: auto;
  }
}
</style>
  